<template>
	<view class="container">
		<!-- 固定导航栏 -->
		<scroll-view class="nav-bar" scroll-x :show-scrollbar="false">
			<view class="nav-container">
				<text 
					v-for="(item, index) in navItems" 
					:key="index"
					:class="['nav-item', { 'active': top === index }]"
					@click="switchTab(index)"
				>
					{{ item }}
				</text>
			</view>
		</scroll-view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" direction="vertical" @scrolltolower="getMoreVideo()" scroll-y="true"
		 refresher-enabled="true" @refresherrefresh='refresh()' :refresher-threshold="80" :refresher-triggered="triggered">
			<!-- 热门舞 -->
			<view v-show="top === 0" class="page">
				<view class="video-grid">
					<view class="video-card" v-for="video in danceVideos[0]" @click="gotoPlay(video)">
						<image class="thumbnail" :src="video.imgSrc" mode="aspectFill" lazy-load></image>
						<text class="video-title">{{video.title}}</text>
					</view>
				</view>
			</view>

			<!-- 广场舞 -->
			<view v-show="top === 1" class="page">
				<view class="video-grid">
					<view class="video-card" v-for="video in danceVideos[1]" @click="gotoPlay(video)">
						<image class="thumbnail" :src="video.imgSrc" mode="aspectFill" lazy-load></image>
						<text class="video-title">{{video.title}}</text>
					</view>
				</view>
			</view>

			<!-- 其他分类 -->
			<view v-show="top === 2" class="page">
				<view class="video-grid">
					<view class="coming-soon">内容筹备中，敬请期待</view>
				</view>
			</view>
			<view v-show="top === 3" class="page">
				<view class="video-grid">
					<view class="coming-soon">内容筹备中，敬请期待</view>
				</view>
			</view>
			<view v-show="top === 4" class="page">
				<view class="video-grid">
					<view class="coming-soon">内容筹备中，敬请期待</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			triggered: false,
			freshing: false,
			top: 0,
			haveMore:1,
			num:8,
			navItems: ['热门', '广场舞', '古典舞', '芭蕾舞', '现代舞'],
			danceVideos:[
				[],
				[],
				[],
				[],
				[]
			]
		}
	},
	methods: {
		switchTab(index) {
			this.top = index
			this.haveMore=1;
			if(this.danceVideos[index].length<=0){
				this.getMoreVideo();
			}
		},
		getMoreVideo(){
			if(this.haveMore==0){
				return
			}
			let currentKeyset;
			if(this.danceVideos[this.top].length==0){
				currentKeyset=100000
			}else{
				currentKeyset=this.danceVideos[this.top][0].videoId;
			}
			uni.request({
				url:this.baseUrl+'/getVideosList',
				method:'POST',
				header: { 'Content-Type': 'application/json' },
				data:{
					type:this.top,
					currentLen:this.danceVideos[this.top].length,
					currentKeyset:currentKeyset,
					num:this.num
				},
				success: (res) => {
					console.log(res.data.data);
					if(res.data.data==null||res.data.data.length<this.num){
						this.haveMore=0;
						uni.showToast({
							title:'没有更多内容了',
							duration:2000,
							icon:'none'
						})
					}
					if(res.data.data!=null){
						for(let i=0;i<res.data.data.length;i++){
							res.data.data[i].imgSrc=this.baseUrl+'/img/'+res.data.data[i].imgSrc
							this.danceVideos[this.top].push(res.data.data[i]);
						}
					}
					
				},
				fail: (err) => {
					console.log(err)
				}
			})
		},
		gotoPlay(video){
			uni.navigateTo({
				url:'/pages/play/play?playID='+video.videoId
			})
		},
		refresh(){
			if (this.freshing) return;  
			this.freshing = true; 
			if (!this.triggered){
				this.triggered = true; 
			}	 
			this.danceVideos[this.top].splice(0,this.danceVideos[this.top].length);
			this.haveMore=1;
			this.getMoreVideo();
            setTimeout(() => {  
                this.triggered = false;//触发onRestore，并关闭刷新图标  
                this.freshing = false;  
            }, 3000) 
			
		}
	},
	mounted() {
		this.switchTab(0)
	}
}
</script>

<style lang="scss">
.container {
	padding-top: 70rpx; // 避免使用固定定位补偿高度
	height: 100vh;
	box-sizing: border-box; // 确保高度包含 padding
	background: #f5f5f5;
}

/* 固定导航栏样式 */
.nav-bar {
	width: 100%;
	height: 80rpx;
	background: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
	
	.nav-container {
		display: inline-flex;
		height: 100%;
		align-items: center;
		padding: 0 30rpx;
	}
	
	.nav-item {
		position: relative;
		padding: 0 20rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #666;
		transition: all 0.3s;
		
		&.active {
			color: #FF6B6B;
			font-weight: 500;
			&::after {
				content: '';
				position: absolute;
				bottom: 16rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 48rpx;
				height: 4rpx;
				background: #FF6B6B;
				border-radius: 2rpx;
			}
		}
	}
}

/* 内容区域样式 */
.content {
	height: 90vh; // 直接继承父容器高度
	overflow-y: scroll;
	
	.page {
		padding: 24rpx;
		min-height: 100%;
		box-sizing: border-box;
		
		.video-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24rpx;
			
			.video-card {
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.06);
				transition: transform 0.2s;
				
				&:active {
					transform: scale(0.98);
				}
				
				.thumbnail {
					width: 100%;
					height: 320rpx;
					background: #eee;
				}
				
				.video-title {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					padding: 16rpx 20rpx;
					font-size: 28rpx;
					line-height: 1.4;
					color: #333;
				}
			}
			
			.coming-soon {
				grid-column: 1 / -1;
				text-align: center;
				padding: 100rpx 0;
				color: #999;
				font-size: 28rpx;
			}
		}
	}
}
</style>




<!-- hotDanceVideos:[
				{title:'热门舞蹈内容1',imgPath:'/static/logo.png',playID:'test1'},
				{title:'热门舞蹈内容2',imgPath:'/static/logo.png',playID:'test2'},
				{title:'热门舞蹈内容3',imgPath:'/static/logo.png',playID:'test3'},
				{title:'热门舞蹈内容4',imgPath:'/static/logo.png',playID:'test4'},
				{title:'热门舞蹈内容5',imgPath:'/static/logo.png',playID:'test5'},
				{title:'热门舞蹈内容6',imgPath:'/static/logo.png',playID:'test6'},
				{title:'热门舞蹈内容7',imgPath:'/static/logo.png',playID:'test7'},
			],
			squareDanceVideos:[
				{title:'广场舞教学视频1',imgPath:'/static/logo.png',playID:'test8'},
				{title:'广场舞教学视频2',imgPath:'/static/logo.png',playID:'test9'},
				{title:'广场舞教学视频3',imgPath:'/static/logo.png',playID:'test10'},
				{title:'广场舞教学视频4',imgPath:'/static/logo.png',playID:'test11'},
				{title:'广场舞教学视频5',imgPath:'/static/logo.png',playID:'test12'},
				{title:'广场舞教学视频6',imgPath:'/static/logo.png',playID:'test13'},
				{title:'广场舞教学视频7',imgPath:'/static/logo.png',playID:'test14'},
			] -->